<template>
  <div>
    <el-row>
      <el-col :span="14">工单所需配件列表</el-col>
      <el-col :span="10" align="right">
        <el-button
          icon="el-icon-plus"
          type="primary"
          @click="handleDataInsert('配件选择')"
          >添加配件</el-button
        >
      </el-col>
    </el-row>
    <el-row v-if="workUserList.length > 0">
      <data-table
        :value="partsList"
        :total-count="partsList.length"
        :has-action="true"
        :table-column-attributes="tableColumnAttributes"
        :localPage="true"
      >
        <template #allNum>
          <div class="tabelAomut">
            <div>
              项目总金额：<span>￥{{ totalAmount }}</span>
            </div>
            <div>
              项目优惠金额：<span>￥{{ totalAmount - totalDiscountAmount }}</span>
            </div>
            <div>
              项目折后总金额：<span>￥{{ totalDiscountAmount }}</span>
            </div>
          </div>
        </template>
        <template #action="{ row, index }">
          <i
            class="el-icon-delete"
            title="删除"
            style="color: red; margin-left: 20px; cursor: pointer"

            @click="delTabelData(index)"
          ></i>
        </template>
      </data-table>
    </el-row>
    <el-dialog
      v-if="visible"
      :title="dialogTitle"
      :visible.sync="visible"
      :append-to-body="true"
      :width="'1000px'"
      @close="dialogClose"
    >
      <SelectAccessories
        v-if="dialogTitle == '配件选择'"
        :storageId="8"
        @partsList="getPartsList"
      />
    </el-dialog>
  </div>
</template>
<script>
import DataTable from "@/components/DataTable";
import SelectAccessories from "@/components/SelectAccessories/index"; //配件选择组件
import { getUserOrTem } from "@/utils/index";
export default {
  components: {
    DataTable,
    SelectAccessories,
  },
  props: {
    list: {
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      visible: false,
      dialogTitle: "",
      partsList: [], //项目列表
      workUserList: [], //班组或员工列表
      tableColumnAttributes: [
        // { name: '所属项目', value: 'storeId', type: 'text' },
        { name: "配件编号", value: "partsCode", type: "text" },
        { name: "配件名称", value: "partsName", type: "text" },
        { name: "配件类型", value: "partsType", type: "text" },
        { name: "配件单位", value: "partsUnit", type: "text" },
        { name: "所需数量", value: "num", type: "inputNumber" },
        // { name: "库存余额", value: "stockNum", type: "text" },
        { name: "配件金额", value: "partsPrice", type: "text" },
        {
          name: "折扣",
          value: "discount",
          type: "inputNumber",
          maxFiled: 10,
          minFiled: 0,
          precision:1,
        },
        {
          name: "折后金额",
          value: "discountAmount",
          type: "render",
          render: this.discountAmount,
        },
        { name: "总金额", value: "amount", type: "text" },
        { name: "状态", value: "status", type: "text", color: "color:#85ce61" },
        {
          name: "收费类型",
          value: "tollType",
          type: "select",
          valueId: "tollType",
          options: [
            { index: 1, id: "自费", value: "自费" },
            { index: 2, id: "免费保养", value: "免费保养" },
            { index: 3, id: "索赔", value: "索赔" },
            { index: 4, id: "返工", value: "返工" },
            { index: 5, id: "保险", value: "保险" },
          ],
        },
        { name: "作业人员/班组", value: "pickId", type: "select", options: [] },
      ],
      totalAmount: 0, //总金额
      totalDiscountAmount: 0, //折后总金额
    };
  },
  watch: {
    partsList: {
      deep: true,
      handler(newValue, oldValue) {
        console.log(newValue);
        this.totalAmount = 0;
        this.totalDiscountAmount = 0;
        newValue.forEach((item, index) => {
          item.amount = item.num ? Number(item.num * item.partsPrice) : 0;
          this.totalAmount += Number(item.amount);
          this.totalDiscountAmount += Number(this.discountAmount(item));
        });
        this.$emit("setTotalAmount");
      },
    },
  },
  computed: {},
  methods: {
    //计算折扣
    discountAmount(row, value) {
      let sum = row.num ? row.num * row.partsPrice : 0,
        _amount = 0;
      if (row.tollType && (row.tollType == "免单" || row.tollType == "返工")) {
        _amount = 0;
      } else {
        _amount = sum;
        if (row.discount > 0) {
          _amount = sum * Number(row.discount / 10);
        }
      }
      return _amount;
    },
    handleDataInsert(title) {
      this.visible = true;
      this.dialogTitle = title;
    },
    //表单删除
    delTabelData(index) {
      this.partsList.splice(index, 1);
    },
    //弹窗选择
    getPartsList(list, partsList) {
      const { partsDiscount } = JSON.parse(sessionStorage.getItem("login"));
      list.map((element) => {
        this.$set(element, "partsUnit", element.unit);
        this.$set(element, "discount", partsDiscount)
        this.$set(element, "num", 1)
        this.$set(element, "tollType", '自费')
        this.$set(element, "status", '未出库')
        this.$set(element, "partsType", element.partsDictValue)
        this.$set(element, "stockNum", element.internalNum)
        // this.$set(element, "partsPrice", element.storagePrice)//20210402 邓小涛要求将配件金额字段改为返回的销售字段
        this.$set(element, "partsPrice", element.salePrice)
        this.$set(element, "carPartsId", element.id)
        delete element.id;
      });
      this.partsList = this.partsList.concat(list);
      this.dialogClose();
    },
    dialogClose() {
      this.visible = false;
    },
  },
  async created() {
    this.partsList = this.list;
    let arry = await getUserOrTem();
    this.workUserList = arry;
    this.tableColumnAttributes[
      this.tableColumnAttributes.length - 1
    ].options = this.workUserList;
  },
};
</script>
<style lang="scss" scoped>
.greeColor {
  color: #85ce61;
}
</style>
